<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加用户信息</title>
    <link rel="stylesheet" href="webjars/layui/2.5.5/css/layui.css">
    <!--    导入Jquery-->
    <script src="webjars/jquery/3.4.1/jquery.js" type="text/javascript"></script>
    <!--Layui-->
    <script src="webjars/layui/2.5.5/layui.js" type="text/javascript"></script>
    <!--    引入BootStrap-->
    <link rel="stylesheet" href="webjars/bootstrap/4.3.1/css/bootstrap.css" type="text/css">
    <!--    Js-->
    <script type="text/javascript" src="webjars/bootstrap/4.3.1/js/bootstrap.js"></script>
    <!--    Vue-->
    <script src="js/vue.js" type="text/javascript"></script>
</head>
<body>
<div id="app">



<form class="layui-form" action="" id="check_in">
    <div class="layui-form-item">
        <label class="layui-form-label">姓名</label>
        <div class="layui-input-block">
            <input type="text" name="name" required  lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">名族</label>
        <div class="layui-input-block">
            <input type="text" name="famousRace" required  lay-verify="required" placeholder="请输入名族" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">证件类型</label>
        <div class="layui-input-block">
            <select name="certificates" lay-verify="required">
                <option value="">请选择</option>
                <option value="身份证">身份证</option>
                <option value="军人证">军人证</option>
                <option value="港澳通行证">港澳通行证</option>

            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">证件号码</label>
        <div class="layui-input-block">
            <input type="text" name="certificatesNum" required  lay-verify="required" placeholder="请输入证件号码" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">性别</label>
        <div class="layui-input-block">
            <input type="radio" name="sex" value="男" title="男">
            <input type="radio" name="sex" value="女" title="女" checked>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">户籍</label>
        <div class="layui-input-block">
            <input type="text" name="householdRegister" required  lay-verify="required" placeholder="请输入户籍" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">电话号码</label>
        <div class="layui-input-block">
            <input type="text" name="phone" required  lay-verify="required" placeholder="请输入电话号码" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn"  @click="addUser" type="button">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>

</form>
</div>
<script>
    //Demo
    layui.use('form', function(){
        var form = layui.form;

        //监听提交
        // form.on('submit(formDemo)', function(data){
        //     // layer.msg(JSON.stringify(data.field));
        //     return false;
        // });
    });
    <!--Vue-->
    var app=new Vue({
        el:"#app",
        data:{

        },
        methods:{
            addUser(){
                 $.ajax({
                     url:"http://localhost:8080/house/addUser",
                     data:$("#check_in").serialize()
                     ,type:'post',
                     dataType:"json",
                     success:function (result) {
                         if (result.type>0){
                             window.parent.location.reload();
                             var index = parent.layer.getFrameIndex(window.name);
                             parent.layer.close(index);
                         }
                     }
                 })
            }

        }


    });
</script>

</body>
</html>